<template>
  <div class="home-container">
    <van-nav-bar class="login-nav-bar" fixed>
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        round
        icon="search"
        to="/search"
      >
        搜索
      </van-button>
    </van-nav-bar>

    <van-tabs class="channel-tabs" v-model="active" animated swipeable >
      <!-- 5. 将数据 循环渲染到页面 -->
      <van-tab
        v-for="item in channels"
        :key="item.id"
        :title="item.name"
      >
        <airticle-list :channel="item" />
      </van-tab>

      <div slot="nav-right" class="placeholder">
      </div>
      <div slot="nav-right" class="hamburger-btn">
        <i class="toutiao toutiao-gengduo" @click="isShowEdit = true"></i>
      </div>
    </van-tabs>

    <van-popup
      v-model="isShowEdit"
      position="bottom"
      :style="{ height: '100%' }"
      closeable
      close-icon-position="left"
    >
      <!-- 2. 将 父组件获取的 channels 传递给子组件 -->
      <channel-edit
        :channels="channels"
        :active="active"
        @changeActive="changeActiveFn"
      />
    </van-popup>
  </div>
</template>

<script>
// 2. 导入 tabs 方法
import { getChannels } from '@/api/user'
import AirticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
import { mapState } from 'vuex'
import { getLocal } from '@/utils/storage'

export default {
  data() {
    return {
      active: 0,
      channels: [],
      isShowEdit: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  components: {
    AirticleList,
    ChannelEdit
  },
  created() {
    // 3. 页面已加载 我们就发请求拿数据
    this.getChannelsFn()
  },
  methods: {
    async getChannelsFn() {
      let channels = []

      let local = getLocal('channels')
      //                  local 只能是 数组 或者对象, 当由本地存储就是数组 ，没有就是对象
      //                 所以 可以通过length 来确保是由有值， 有值 代表 由本地存储， 所以 取反 则代表没有本地存储
      //                  !(local.length)
      if( this.user.token || !(local.length) ) {
        // 1. 登录 this.user.token  或者 没有本地存储 getLocal('channels')
        const {data: {data}} = await getChannels()

        channels = data.channels
      } else {
        // 2 其他
        channels = local
      }

      this.channels = channels
    },
    // 4. 父组件接收子组件传递过来的 索引
    changeActiveFn(index, isShowEdit) {
      this.active = index

      // 5. 隐藏 popup弹框
      this.isShowEdit = isShowEdit
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  /deep/.van-popup__close-icon {
    top: 10px;
    left: 20px;
  }

  .van-icon{
    color: #fff;
  }

  /deep/.van-nav-bar__title {
    max-width: unset;
  }
  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }

  /deep/ .channel-tabs {
    .placeholder{
      flex-shrink: 0;
      width: 66px;
    }

    .hamburger-btn {
      position: fixed;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 66px;
      height: 82px;
      background-color: #fff;
      opacity: 0.902;
      i.toutiao {
        font-size: 33px;
      }
    }

    .van-tab {
      border-right: 1px solid #EDEFF3;
      min-width: 200px;
      height: 80px;
      .van-tab__text {
        font-size: 27px;
        color: #777777;
      }
    }

    .van-tabs__wrap {
      position: fixed;
      top: 92px;
      left: 0;
      width: 100%;
      border-bottom: 0.01333rem solid #EDEFF3;
      z-index: 2;
    }

    .van-tab--active .van-tab__text{
      color: #333 !important;
    }
    .van-tabs__line {
      width:31px !important;
      height:6px;
      background:rgba(50,150,250,1);
      border-radius:3px;
      bottom: 8px;
    }
    .van-tabs__nav {
      padding: 0;
    }
  }
}
</style>
